<template>
  <div class="search-result">
    <div class="title">查询结果</div>
    <img class="content-img" src="./img.png" alt="">
    <ul class="list">
      <li>
        <span>活动时间：</span>
        <div style="color: #ff6200">
          {{ formatTime(obj.startTime) }} - {{ formatTime(obj.endTime) }}
        </div>
      </li>
      <li>
        <span>活动地点：</span>
        <div>{{ obj.address }}</div>
      </li>
      <li>
        <span>个人信息：</span>
        <div>{{ obj.notice }}</div>
      </li>
    </ul>
    <van-button
      class="btn"
      plain
      hairline
      type="info"
      @click="$router.go(-1)"
    >返回</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$axios({
        method: 'post',
        url: `/activity/details?activityId=${this.$route.query.activityId}`
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.obj = res.data.data
        }
      })
    },
    formatTime(time) {
      return (time || '').slice(0, 10).replace(/-/g, '.')
    }
  }
}
</script>

<style scoped>
.search-result {
  height: 100vh;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333;
  padding-bottom: 16px;
  text-align: center;
  background: #fff;
}
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium;
  line-height: 20px;
  padding: 23px 0;
  margin: 0 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.content-img {
  width: 178px;
  height: 178px;
  margin: 24px 0 12px;
}
.list {
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
}
.list li {
  display: flex;
  margin: 7px 23px;
}
.list span {
  width: 90px;
  display: inline-block;
  color: #969799;
  line-height: 20px;
}
.list div {
  display: inline-block;
  width: 80%;
  text-align: left;
}
.btn {
  width: 104px;
  height: 32px;
  border-radius: 4px;
  margin-top: 13px;
}
</style>
